<template>
	<view class="container">

		<swiper class="swiper" :circular="true" :autoplay="true" :indicator-dots="true" :interval="1500">
			<swiper-item v-for="(item, index) in images" :key="index">
				<image :src="item" class="img"></image>
			</swiper-item>
		</swiper>

		<uni-notice-bar class="uni-mt-5" text="基于开源人工智能大模型训练,可以轻松修复和增强面部图像" />

		<view class="uni-mt-5">
			<button type="primary" @click="upload">上传</button>
		</view>

		<view class="uni-mt-10 compare">
			<uni-row>
				<uni-col class="compare-item" :span="12">
					<view style="text-align: center;">
						<text>处理前</text>
					</view>
					<image :src="before" class="img" @click="preview(before)" mode="aspectFit"></image>
				</uni-col>
				<uni-col class="compare-item" :span="12">
					<view style="text-align: center;">
						<text>处理后</text>
					</view>
					<image :src="after" class="img" @click="preview(after)" mode="aspectFit"></image>
				</uni-col>
			</uni-row>
		</view>
		<view>
			<uni-section class="mb-10" title="生成记录">
				<template #right>
					点击刷新
				</template>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {
		getApiPrefix,
		getBaseUrl
	} from '../../config/env';
	import {
		doPost
	} from '../../config/request';
	import {
		getAuthorization
	} from '../../config/store';
	import {
		doGet
	} from '/config/request.js'

	export default {
		data() {
			return {
				images: [
					// "/static/index/demo1.png",
					"/static/index/demo2.png",
					"/static/index/demo3.png"
				],
				before: "/static/index/before.png",
				after: "/static/index/after.png",
			}
		},
		onLoad() {},
		methods: {
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.uploadFile({
							url: getBaseUrl() + getApiPrefix() + "/file/upload", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							fileType: "image",
							header: {
								"Authorization": "Bearer " + getAuthorization()
							},
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								if (uploadFileRes.statusCode != 200) {
									uni.showToast({
										title: "上传失败，请重试"
									})
									return
								}
								let response = JSON.parse(uploadFileRes.data);
								if (!response.success) {
									uni.showToast({
										title: "上传失败，请重试"
									})
									return
								}
								let relativePath = response.data.relativePath;

								doPost("/user/add_record", {
									"type": 1,
									"relativePath": relativePath
								}, function({
									data
								}) {
									uni.showToast({
										icon: 'success',
										title: "上传成功，后台正在处理，大概一分钟"
									})
									this.before = res.tempFilePaths[0]
									this.after = null
								})
							},
							fail: (e) => {
								console.log(e);
								uni.showToast({
									title: "上传失败，请重试"
								})
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {}

	.container .swiper {
		height: 320rpx;
		width: 100%;
	}

	.container .swiper .img {
		width: 100%;
		height: 100%;
	}

	.compare .compare-item {}

	.compare .img {
		width: 100%;
	}
</style>